<template>
	<!-- 改到这个页面 -->
	<view class="onebox">
		<view class="headBg">
			<view class="head-content">
				<view @click="toBack" class="head-content-left" style="margin-left: 20rpx;">
					< </view>
						<view class="head-content-center">
							帖子详情
						</view>
				</view>
			</view>
			<view class="box25">
				<view class="box5">
					<view class="box5 box24">
						<view>
							<image class="img4"
								style="width: 90rpx; height: 90rpx;margin-right: 20rpx; border-radius: 50%;"
								:src="TzDetailList.avatar" mode=""></image>
						</view>
						<view class="text">
							<view class="" style="font-size: 28rpx; font-weight: 600;">
								{{TzDetailList.nickname}}
							</view>
							<view class="" style="font-size: 26rpx; color: #A3A2A2; margin-top: 16rpx;">
								发布于 {{ TzDetailList.createtime | timeAgo }}
							</view>
						</view>
					</view>
					<view class="box7">
						<view class="btn2">
							<image class="img3" src="../../static/syqt/gz.png" mode=""></image>
							<view class="text" style="font-size: 26rpx; color: #26B8A5;">
								关注
							</view>
						</view>
					</view>
				</view>
				<view class="box5" style="margin: 20rpx 0rpx;">
					<view @click="changePlaceholder(1)" class="text" style="font-size: 28rpx;">
						{{TzDetailList.content}}
					</view>
				</view>
				<view v-if="TzDetailList.images!=[]" class="box88888">
					<view v-for="(items,index) in TzDetailList.images" :key="index" style="margin-top: 30rpx;">
						<image class="img13" style="margin-right: 28rpx; " :src="items" mode="">
						</image>
					</view>
				</view>
				<view class="box5" style="">
					<!-- 后续可能需要打开 -->
					<!-- <view class="box5 box24" style="justify-content: left;">
						<image class="img14" src="../../static/syqt/fx.png" mode=""></image>
						<view class="text" style="font-size: 22rpx; color: #929090;">
							分享
						</view>
					</view> -->
					<view class="box5 box24" style="justify-content: center;">
						<image class="img14" src="../../static/syqt/pl.png" mode=""></image>
						<view class="text" style="font-size: 22	rpx; color: #929090;">
							赞赏
						</view>
					</view>
					<view class="box5 box24" style="justify-content: right;">
						<!-- 未点赞 -->
						<view v-if="TzDetailList.zan=='0'" class="box5 box24">
							<image @click="GetAddZan(TzDetailList.id,1,1)" class="img14" src="../../static/syqt/z.png"
								mode=""></image>
							<view v-if="TzDetailList.zan_num==0" class="text"
								style="font-size: 22	rpx; color: #929090;">
								点赞
							</view>
							<view v-if="TzDetailList.zan_num>0" class="text" style="font-size: 22	rpx; color: #929090;">
								{{TzDetailList.zan_num}}
							</view>
						</view>

						<!-- 已点赞 -->
						<view v-if="TzDetailList.zan=='1'" class="box5 box24">
							<image @click="GetAddZan(TzDetailList.id,1,1)" class="img18" src="../../static/good.png"
								mode="">
								<view class="text" style="font-size: 22	rpx; color: #929090;">
									{{TzDetailList.zan_num}}
								</view>
						</view>

					</view>
				</view>
			</view>
			<view class="details">
				<view class="box5">
					<view class="box24">
						{{TzDetailList.comment_num}}条评论
					</view>
					<view class="" style="color: #929090;">
						按热度
					</view>
				</view>
				<view class="details-list" v-for="(item,index) in TzCommentList" :key="index">
					<view class="box5">
						<view class="" style="margin-right: 15rpx;">
							<image class="img4" style="width: 105rpx; height: 105rpx;" src="../../static/syqt/tx.png"
								mode="">
							</image>
						</view>
						<view class="">
							<view class="">
								{{item.nickname}}
							</view>
							<view class="text-time">
								{{ item.createtime | timeAgo }}
							</view>
						</view>
					</view>
					<view class="">
						<view class="box5" style="margin-bottom: 20rpx;">
							<view @click="changePlaceholder(2,item.nickname,item.id,item.my)" class="box24"
								style="margin-left: 118rpx;">
								{{item.content}}
							</view>
							<view class="box5">
								<!-- <image class="img14" src="../../static/syqt/z.png" mode=""></image> -->
								<image v-if="item.zan=='0'" @click="GetAddZan(item.id,index,2)" class="img14"
									src="../../static/syqt/z.png" mode=""></image>
								<image v-if="item.zan=='1'" @click="GetAddZan(item.id,index,2)" class="img18"
									src="../../static/good.png" mode="">
									<view class="">
										{{item.zan_num}}
									</view>
							</view>
						</view>
						<image v-if="item.image!=''" class="img5" :src="item.image" mode=""></image>
						<view class="second" style="" v-for="(item2,index) in item.reply_list">
							{{item2.content}}
						</view>
					</view>

				</view>
			</view>
			<!-- 	<view style=" height: 80rpx; width: 760rpx; background-color: red;" @click="ggspec"></view> -->
			<view class="nomore">没有了</view>

			<!-- 弹窗部分 -->
			<view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="ggspec">
				<!-- 遮罩层 -->
				<view class="mask"></view>
				<!-- @click.stop="stopPrevent"禁止点击蒙板会退出事件 -->
				<view class="layer attr-content" @click.stop="stopPrevent">
					<view @click="ggspec" class="text-hf">
						回复
					</view>
					<view v-if="my==1" @click="delMyCm" class="text-hf">
						删除
					</view>
				</view>
			</view>
			<view class="" style="height: 500rpx;">

			</view>
			<view class="bottom">
				<view class="box3">
					<input class="input" v-model="content" type="text" :placeholder="inputPlaceholder" />
				</view>
				<view class="flex-wrap">
					<view class="imgwrap" v-for="(item, index) in upImgGroup">
						<image src="../../static/qx.png" style="height: 20rpx; width: 20rpx;" @click="closeImg(index)"
							mode=""></image>
						<image :src="item" style="width: 100%;height: 100%;" @click="previewImage(index)"></image>
					</view>
				</view>
				<view class="box5" style="padding: 30rpx;">
					<view class="" style="flex: 1;">
						<image @click="upimage" class="img14" src="../../static/fbqt/zx.png" mode=""></image>
						<image class="img14" src="../../static/syqt/pl.png" mode=""></image>
					</view>
					<view class="btn1" @click="GetAddComment">
						发送
					</view>
				</view>
			</view>
		</view>
</template>

<script>
	import $api from '../../common/request3.js'
	export default {
		data() {
			return {
				upImgGroup: [], //上传图片集合
				tz_id: '',
				avatar: '',
				TzDetailList: {},
				nickname: '',
				page: '1',
				TzCommentList: [],
				inputPlaceholder: "",
				content: '',
				image: '',
				key: "123456",
				"isHas": true,
				zan: "",
				reply_id: '',
				specClass: 'none', //specClass: 'none'弹出框的隐藏状态
				cm_id: '',
			}
		},
		onLoad(op) {
			this.tz_id = op.tz_id

			this.key = uni.getStorageSync('key');
			this.GetTzDetail()

			this.GetTzCommentList('reset');
		},
		onReachBottom() {
			if (this.userMobile) {
				this.page++;
				this.GetTzCommentList('add')
			}
		},
		computed: {
			// 计算属性，用于动态显示用户的赞数
			userLikeCount() {
				return this.TzCommentList[index]
			}
		},
		filters: {
			timeAgo(createtime) {
				const now = Date.now();
				const seconds = Math.floor((now - createtime * 1000) / 1000);

				let interval = seconds / 31536000;

				if (interval > 1) {
					return parseInt(interval) + "年前";
				}
				interval = seconds / 2592000;
				if (interval > 1) {
					return parseInt(interval) + "月前";
				}
				interval = seconds / 86400;
				if (interval > 1) {
					return parseInt(interval) + "天前";
				}
				interval = seconds / 3600;
				if (interval > 1) {
					return parseInt(interval) + "小时前";
				}
				interval = seconds / 60;
				if (interval > 1) {
					return parseInt(interval) + "分钟前";
				}
				return "刚刚";
			}
		},
		methods: {
			// 等加参数
			GetAddZan(id, index, panduan) {
				if (panduan == 1) {
					var tz_id = id
					var cm_id = ''
				} else if (panduan == 2) {
					var tz_id = ''
					var cm_id = id
				}
				var openid = uni.getStorageSync('openid');

				$api.request({
					url: "lt/addZan",
					method: 'POST',
					data: {
						key: this.key,
						openid: openid,
						tz_id: tz_id,
						cm_id: cm_id
					}
				}).then((res) => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					this.zan = res.data.zan
					// this.GetTzCommentList('reset')
					if (panduan == 2) {
						if (res.data.zan == '0') {
							this.TzCommentList[index].zan_num -= 1;
							this.TzCommentList[index].zan = 0
						} else {
							this.TzCommentList[index].zan_num += 1;
							this.TzCommentList[index].zan = 1
						}
						return
					} else {
						// 未点赞·
						if (res.data.zan == '0') {
							this.TzDetailList.zan_num -= 1;
							this.TzDetailList.zan = 0
						} else {
							this.TzDetailList.zan_num += 1;
							this.TzDetailList.zan = 1
						}
						return
					}
				}).catch((res) => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				})

			},
			stopPrevent() {}, //该事件是为了不让蒙版下的页面滚而不报错的
			ggspec() {

				if (this.specClass === 'show') {
					this.specClass = 'hide';
					setTimeout(() => {
						this.specClass = 'none';
					}, 250);
				} else if (this.specClass === 'none') {
					this.specClass = 'show';
				}
			},
			changePlaceholder(type, nickname, id, my) {
				console.log(type)
				if (type == 1) {
					this.inputPlaceholder = '回复给' + this.TzDetailList.nickname
					this.reply_id = '0'

				} else {
					this.my = my
					this.inputPlaceholder = '回复给' + nickname;
					this.reply_id = id
					this.cm_id = id
					this.ggspec()

				}

			},
			delMyCm() {
				var openid = uni.getStorageSync('openid');
				$api.request({
					url: "lt/delMyCm",
					method: 'POST',
					data: {
						key: this.key,
						openid: openid,
						cm_id: this.cm_id
					}
				}).then((res) => {
					this.GetTzCommentList('reset');
					this.ggspec()
					alert('删除成功')
					console.log(res.data, '8888')
				}).catch((res) => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				})
			},
			GetTzDetail() {
				var openid = uni.getStorageSync('openid');
				$api.request({
					url: "lt/getTzDetail",
					method: 'POST',
					data: {
						key: this.key,
						openid: openid,
						tz_id: this.tz_id
					}
				}).then((res) => {
					console.log(res.data, '66')
					this.TzDetailList = res.data
					this.inputPlaceholder = '回复给' + this.TzDetailList.nickname
				}).catch((res) => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				})
			},
			GetTzCommentList(type) {
				if (type == "reset") {
					this.TzCommentList = []
					this.page = 1;

				}
				var openid = uni.getStorageSync('openid');
				$api.request({
					url: "lt/getTzCommentList",
					method: 'POST',
					data: {
						key: this.key,
						openid: openid,
						tz_id: this.tz_id,
						page: this.page,
					}
				}).then((res) => {
					let arr = res.data || [];
					this.isHas = arr.length > 10;
					arr.map(item => {
						this.TzCommentList.push(item)
					})
				}).catch((res) => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				})
			},
			GetAddComment() {
				var openid = uni.getStorageSync('openid');
				$api.request({
					url: "lt/addComment",
					method: 'POST',
					data: {
						key: this.key,
						openid: openid,
						content: this.content,
						image: this.image,
						tz_id: this.TzDetailList.id,
						reply_id: this.reply_id
					}
				}).then((res) => {
					this.GetTzCommentList('reset');
					this.upImgGroup = []
					this.content = ''
				}).catch((res) => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				})

			},
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			GetUpImage() {
				var openid = uni.getStorageSync('openid');

				$api.request({
					url: "lt/upImage",
					method: 'POST',
					data: {
						key: this.key,
						openid: openid,
						file: this.upImgGroup[0]
					}
				}).then((res) => {
					console.log(res)
				}).catch((res) => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				})
			},

			// 上传图片
			upimage() {
				var _that = this;
				var openid = uni.getStorageSync('openid');
				uni.chooseImage({
					count: 1, // 默认9，设置图片的数量
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						_that.upImgGroup = _that.upImgGroup.concat(chooseImageRes.tempFilePaths)
						const uploadTask = uni.uploadFile({
							url: 'https://admin.dqzjw.cn/api/lt/upImage',
							filePath: tempFilePaths[0],
							name: 'file', // 必须填写，后台用来接收文件
							header: {
								'site3-f-ue': uni.getStorageSync('site3-f-ue')
							},
							formData: {
								key: _that.key,
								openid: openid, // 其他要传的参数
							},
							success: (uploadFileRes) => {

								console.log('图片上传成功', uploadFileRes);
								let imgData = JSON.parse(uploadFileRes.data)
								console.log(imgData.data.fullurl)
								_that.image = imgData.data.fullurl
							},
							fail: (uploadFileErr) => {
								console.error('图片上传失败', uploadFileErr);
							}
						});
						// 监听上传进度变化
						uploadTask.onProgressUpdate((res) => {
							console.log('上传进度' + res.progress + '%');
						});
					},
					fail: (chooseImageErr) => {
						console.error('选择图片失败', chooseImageErr);
					}
				});

			},
			// 删除图片
			closeImg(index) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '是否删除当前图片',
					success: function(res) {
						if (res.confirm) {
							that.upImgGroup.splice(index, 1);
							let id = that.upImgList[index].consignmentGoodsImgId;
							that.deleteImgTwo(id);
							that.upImgList.splice(index, 1);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			previewImage(index) {
				uni.previewImage({
					current: index,
					urls: this.upImgGroup
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.onebox {
		min-height: 100vh;
		background-color: #F6F7F8;
	}

	.headBg {
		width: 750rpx;
		height: 80rpx;
		background-color: #63d6ba;
	}

	.head-content {
		display: flex;
		align-items: center;
		padding-top: 24rpx;
		color: #fefefe;
	}

	.head-content-center {
		flex: 1;
		display: flex;
		justify-content: center;
		margin-right: 50rpx;
	}

	.box25 {
		background: #FFFFFF;
		padding: 30rpx 40rpx;
	}

	.box5 {
		display: flex;
		align-items: center;
	}

	.box1 {
		display: flex;
		justify-content: center;
		align-items: left;
		flex-direction: column;
	}

	// 水平且居中
	.box3 {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.img14 {
		width: 40rpx;
		height: 40rpx;
		margin-right: 0rpx;
	}

	.img13 {
		width: 192rpx;
		height: 192rpx;
		border-radius: 10rpx;
	}

	.img3 {
		width: 36rpx;
		height: 32rpx;
	}

	.box24 {
		flex: 1;
	}

	.details {
		background-color: #fff;
		margin-top: 15rpx;
		padding: 10rpx 40rpx;
		min-height: 600rpx;
	}

	.text-time {
		font-size: 24rpx;
		color: #929090;
	}

	.details-list {
		border-bottom: 1rpx solid rgb(240, 240, 240);
		padding: 25rpx 0;
	}

	.bottom {
		min-height: 200rpx;
		width: 100%;
		background-color: #fff;
		// z-index: 999;
		position: fixed; //定位;
		left: 0;
		bottom: 0;
		box-shadow: 0 0 1px 1px #f0fcff, 0 0 1px 1px #f3f9f1, 0 0 8px 2px #e0eee8;

		.input {
			background-color: #F6F7F8;
			width: 700rpx;
			height: 80rpx;
			margin-top: 30rpx;
			color: #929090;
			font-size: 24rpx;
			padding: 0 20rpx;
		}
	}

	.btn1 {
		padding: 8rpx 20rpx;
		background-color: #63d6ba;
		border-radius: 5rpx;
		color: #fff;
		font-size: 24rpx;
		border: 1rpx solid rgb(240, 240, 240);
	}

	.flex-wrap {

		display: flex;
		flex-wrap: wrap;
		align-items: center;
		background-color: #F6F7F8;
		margin: 0 25rpx;
		padding: 0 15rpx;
	}

	.imgwrap {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: relative;
		width: 120upx;
		height: 120upx;
		margin-right: 18upx;
		margin-bottom: 20upx;

		.iconfont {
			color: #eee;
			position: absolute;
			top: -10upx;
			right: -10upx;
			z-index: 1;
		}
	}

	.second {
		margin-left: 118rpx;
		background-color: #F6F7F8;
		padding: 10rpx 20rpx;
		border-radius: 5rpx;
		font-size: 24rpx;
	}

	.img5 {
		width: 80rpx;
		height: 80rpx;
		margin-left: 120rpx;
		border-radius: 10rpx;
	}

	.box88888 {
		display: flex;
		flex-wrap: wrap;
	}

	.img18 {
		width: 30rpx;
		height: 30rpx;
		margin-right: 0rpx;
	}

	/*  弹出层 */
	.popup {
		position: fixed;

		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;

		&.show {
			display: block; //控制元素以块级元素呈现 

			.mask {
				animation: showPopup 0.2s linear both; //showPopup弹出窗口动画
			}

			.layer {
				animation: showLayer 0.2s linear both; //showLayer弹出层口动画
			}
		}

		&.hide {
			.mask {
				animation: hidePopup 0.2s linear both; //收回时的窗口
			}

			.layer {
				animation: hideLayer 0.2s linear both; //收回时的弹出层
			}
		}

		&.none {
			display: none;
		}

		.mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.2);

		}

		/*layer是弹出层存放内容区  */
		.layer {
			// margin: 50rpx;
			position: fixed;
			z-index: 99;
			bottom: 0;
			left: 0;
			width: 100%;
			border-radius: 20rpx;
			background-color: #fff;
		}

		/* 规格选择弹窗 */
		.attr-content {
			padding: 40rpx;

			.text-hf {
				padding: 50rpx 0;
				border-bottom: 1rpx solid rgb(240, 240, 240);
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		// 动画部分
		@keyframes showPopup {
			0% {
				opacity: 0;
				/* opacity不透明度 */
			}

			100% {
				opacity: 1;
			}
		}

		@keyframes hidePopup {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		@keyframes showLayer {
			0% {
				transform: translateY(180%); //弹出是沿y轴平移
			}

			100% {
				transform: translateY(0%);
			}
		}

		@keyframes hideLayer {
			0% {
				transform: translateY(0); //收回时
			}

			100% {
				transform: translateY(180%); //弹出是沿y轴平移
			}
		}
	}
</style>